<template>
  <div class="goodsInfo-container">
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="beff" v-show="beff" ref="ball"></div>
    </transition>
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <my-swipe :list="swipeList" :isfull="false"></my-swipe>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">{{ goodsInfo.title }}</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>
            市场价：
            <del>￥{{ goodsInfo.market_price }}</del>&nbsp;&nbsp;销售价：
            <span class="price-now">￥{{ goodsInfo.sell_price }}</span>
          </p>
          <p>
            购买数量：
            <goodsnumbox @getCount="getSelectedCount" :max="goodsInfo.stock_quantity"></goodsnumbox>
          </p>
          <mt-button type="primary">立即购买</mt-button>
          <mt-button type="danger" @click="addToCart">加入购物车</mt-button>
        </div>
      </div>
    </div>
    <div class="mui-card">
      <div class="mui-card-header">商品详情信息</div>
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <p>商品货号：{{ goodsInfo.goods_no }}</p>
          <p>库存情况：{{ goodsInfo.stock_quantity }}件</p>
          <p>上货时间：{{ goodsInfo.add_time | dateFromt}}</p>
        </div>
      </div>
      <div class="mui-card-footer">
        <mt-button type="primary" size="large" plain @click="goGoodsDesc(id)">图文介绍</mt-button>
        <mt-button type="danger" size="large" plain @click="goGoodsComment(id)">商品评论</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import swipe from "../common/Swipe.vue";
import GoodsNumbox from "../common/GoodsNumbox.vue";
import { Transform } from "stream";
export default {
  data() {
    return {
      id: this.$route.params.id,
      swipeList: [],
      goodsInfo: {},
      beff: false,
      selectedCount: 1
    };
  },
  components: {
    "my-swipe": swipe,
    "goodsnumbox": GoodsNumbox
  },
  created() {
    this.getSwipeList();
    this.getGoodsInfo();
  },
  methods: {
    getSwipeList() {
      this.$http.get("api/getthumimages/" + this.id).then(result => {
        if (result.data.status == 0) {
          this.swipeList = result.data.message;
        }
      });
    },
    getGoodsInfo() {
      this.$http.get("api/goods/getinfo/" + this.id).then(result => {
        if (result.data.status === 0) {
          this.goodsInfo = result.data.message[0];
        }
      });
    },
    goGoodsDesc(id) {
      this.$router.push({ name: "goodsDesc", params: { id } });
    },
    goGoodsComment(id) {
      this.$router.push({ name: "goodsComment", params: { id } });
    },
    addToCart() {
      this.beff = true;
      console.log(this.$store);
      this.$store.commit("getGoodsInfoList", {
        id: this.id,
        count: this.selectedCount,
        selected: true,
        price: this.goodsInfo.sell_price
      });
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetTop;
      el.style.transition = "all .4s cubic-bezier(0,-0.3,.1,.3)";
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badegPosition = document
        .getElementById("badeg")
        .getBoundingClientRect();
        console.log(badegPosition);
      var xDist = badegPosition.left - ballPosition.left;
      var yDist = badegPosition.top - ballPosition.top;
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      done();
    },
    afterEnter(el, count) {
      this.beff = !this.beff;
    },
    getSelectedCount(count) {
      this.selectedCount = count;
    }
  }
};
</script>
<style lang="scss" scope>
.goodsInfo-container {
  background-color: #eee;
  overflow: hidden;
  .mui-card-footer {
    display: block;
    button {
      margin: 15px 0;
    }
  }
  .price-now {
    color: red;
    font-size: 16px;
    font-weight: bold;
  }
  .beff {
    z-index: 99;
    width: 15px;
    height: 15px;
    background-color: red;
    border-radius: 50%;
    position: absolute;
    top: 290px;
    left: 150px;
  }
}
</style>